<template>
  <view class="tp-icon-menu-item" @click="handlerMenuClick">
    <view class="icon-wrapper" :style="{'background-color': color}">
      <ai-icon :type="icon" :size="24" color="var(--white)"></ai-icon>
    </view>
    <text class="item-title" :style="{color: color}">{{title}}</text>
  </view>
</template>

<script>
  export default {
    name:"tp-icon-menu-item",
    emits: [ 'seleted' ],
    props: {
      icon: String,
      title: String,
      color: String,
      page: String,
      tab: Boolean
    },
    data() {
      return {
        
      };
    },
    methods: {
      handlerMenuClick() {
        let data = { page : this.page, tab: this.tab }
        this.$emit("seleted", data)
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  
  .tp-icon-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    
    .icon-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: $shadow-1;
    }
    .item-title {
      padding-top: $gutter;
      font-size: $font-size-md;
    }
  }

</style>